<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
        <view>
            <view class="order-header">
                <view class="item">
                    <view class="info">
                        <text class="num">{{ data.SendCount }}</text>
                        <text class="unit">件</text>
                    </view>
                    <view class="name">应收件数</view>
                </view>
                <view class="item">
                    <view class="info">
                        <text class="num">{{ data.ReceiptCount || 0 }}</text>
                        <text class="unit">件</text>
                    </view>
                    <view class="name">实收件数</view>
                </view>
                <view class="item">
                    <view class="info">
                        <text class="num">{{ data.SendCount - (data.ReceiptCount || 0) }}</text>
                        <text class="unit">件</text>
                    </view>
                    <view class="name">缺货件数</view>
                </view>
            </view>
            <view class="order-main">
                <view class="order-table">
                    <view class="title-text">
                        <view>商品清单</view>
                    </view>
                    <view class="table-head">
                        <view class="goods">商品名称</view>
                        <view class="count">应收</view>
                        <view class="count" style="width: 100px">实收</view>
                    </view>
                    <view class="table-item" v-for="(item, index) in detailList" :key="index">
                        <view class="goods">
                            <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="goods-img"></image>
                            <view class="goods-name">
                                <view>{{ item.ProductName }}</view>
                                <text v-if="item.DisplayAttribute || item.Attribute">{{
                                    item.DisplayAttribute ? item.DisplayAttribute : item.Attribute
                                }}</text>
                            </view>
                        </view>
                        <view class="count">
                            {{ item.SendCount }}
                        </view>
                        <view class="count" v-if="data.SortingState != 3" style="width: 90px">
                            {{ item.ReceiptCount }}
                        </view>
                        <view class="count" v-else style="width: 100px">
                            <view class="input-number-box">
                                <button
                                    class="number-btn number-btn-minus"
                                    :class="item.ReceiptCount <= 0 ? 'color-shadow' : ''"
                                    :disabled="item.ReceiptCount == 0"
                                    @click="upNum(item, 'ReceiptCount', -1)"></button>

                                <view
                                    class="btn-input-box"
                                    :class="item.ReceiptCount.toString().length > 6 ? 'text-show-line-1' : ''">
                                    <input
                                        v-model="item.ReceiptCount"
                                        type="number"
                                        @blur="upNum(item, 'ReceiptCount', 0)" />
                                </view>

                                <button
                                    class="number-btn number-btn-plus"
                                    :disabled="item.ReceiptCount == item.SendCount"
                                    @click="upNum(item, 'ReceiptCount', 1)"></button>
                            </view>
                        </view>
                    </view>
                    <view class="table-bottom">
                        <view
                            >佣金：<text style="color: #ff5700">￥{{ data.Commission }}</text></view
                        >
                        <view>订单总金额：￥{{ data.OrderPrice }}</view>
                    </view>
                </view>
            </view>
            <view class="order-main">
                <view class="order-item product-item">
                    <view class="title-text title-text-flex">
                        <view>分拣单信息</view>
                    </view>
                    <view class="order-info">
                        <view class="order-info-item">
                            <text class="label">分拣单号：</text>
                            <text class="value">{{ data.SortingNo }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">提 货 点：</text>
                            <text class="value">{{ data.TakeDeliveryName }}</text>
                        </view>
                        <view class="order-info-item">
                            <text class="label">所属团长：</text>
                            <text class="value">{{ data.RegimentHeadName }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <view class="order-state-menu">
                <text class="btn btn-gray" @click="goRelevance(data.ID)">关联订单</text>
                <text class="btn btn-gray" v-if="states.includes(data.SortingState)" @click="goLogistics(data.ID)"
                    >物流信息</text
                >
                <text class="btn btn-danger" v-if="data.SortingState == 3" @click="sortingSignFor">完成数量核对</text>
                <text class="btn btn-success" v-if="data.SortingState == 2" @click="confirmReceipt()">确认收货</text>
            </view>
        </view>
        <uni-popup ref="popTip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确认收货?"
                :before-close="true"
                @close="cancelIt"
                @confirm="doIt"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex"
import orderPrice from "@/pages_shop/components/order/order-price.vue"
import orderStateMenu from "@/components/order/order-state-menu.vue"
import itemTitleBorder from "@/pages_shop/components/common/item-title-border.vue"
import { getSortingInfo, sortingSignFor, sortingReceipt } from "@/service/api/communtiyGroup.js"
export default {
    components: {
        itemTitleBorder,
        orderPrice,
        orderStateMenu,
    },
    data() {
        return {
            config: {
                title: "订单详情",
                back: true,
                color: ["#333"],
                centerSlot: true,
                barPlaceholder: true,
                backgroundColor: [1, "#ffffff"],
            },
            isShowBottomBar: false,
            data: {},
            detailList: [],
            isLoading: false,
            states: [2, 3, 6, 7], // 判断哪些状态有物流信息
            amount: 12,
        }
    },
    watch: {
        //监听更新
        getUpOrderView(e) {
            this.getDetail()
        },
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onReady() {
        //
    },
    onLoad(e) {
        this.id = e.id
        if (e.title) {
            this.config.title = e.title
        }
    },
    created() {},
    mounted() {
        this.getDetail()
        this.isShowBottomBar = true
        this.systemInfo = uni.getSystemInfoSync()
    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
        upNum(item, amount, type) {
            let num = parseInt(Number(item[amount]))
            num = num + type
            if (type == 0) {
                if (num > item.SendCount) {
                    num = item.SendCount
                }
            }
            this.$set(item, amount, num)
        },
        //获取详情
        getDetail() {
            let param = {
                id: this.id,
            }
            this.isLoading = true
            getSortingInfo(param).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    this.detailList = res.Data.DetailList
                    if (this.detailList && this.detailList.length) {
                        let a = 0
                        let b = 0 // (应收、实收)
                        this.detailList.forEach((item) => {
                            a += item.SendCount
                            b += item.ReceiptCount
                        })
                        this.data.SendCount = a || 0
                        this.data.receiptCount = b || 0
                    }
                    this.isLoading = false
                }
            })
        },
        goRelevance(id) {
            this.easyGoTo("/pages_group/packet/order/relevance/index?id=" + id)
        },
        goLogistics(id) {
            this.easyGoTo("/pages_group/packet/order/logistics?id=" + id)
        },
        // 分拣单核对签收
        sortingSignFor() {
            let data = {
                id: this.data.ID,
                detailList: this.detailList,
            }
            sortingSignFor(data).then((res) => {
                if (res.State == 1) {
                    this.easyToast("核对签收成功")
                    setTimeout((e) => {
                        this.upOrderView()
                        this.easyGoBack()
                    }, 800)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        confirmReceipt() {
            this.$refs.popTip.open()
        },
        cancelIt() {
            this.$refs.popTip.close()
        },
        doIt() {
            let param = {
                id: this.data.ID,
            }
            sortingReceipt(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("收货成功")
                    this.cancelIt()
                    this.getDetail()
                    setTimeout((e) => {
                        this.upOrderView()
                    }, 800)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //更新订单列表
        upOrderView() {
            this.UP_ORDER_VIEW(new Date().getTime())
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    background-color: $uni-bg-color-grey;
}

.order-item {
    background: $color-white;
    margin-bottom: 24rpx;
}
.bottom-bar .btn {
    padding: 0 12px;
}

.order-table {
    background: $color-white;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
    .title-text {
        display: flex;
        font-weight: 700;
        padding: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        font-size: 28rpx;
    }
    .table-head {
        display: flex;
        background: #f0f3f8;
        font-size: 28rpx;
        padding: 24rpx;
        .goods {
            flex: 1;
            margin-right: 20rpx;
        }
        .count {
            width: 60px;
        }
    }
    .table-item {
        display: flex;
        font-size: 28rpx;
        padding: 24rpx;
        .goods {
            display: flex;
            flex: 1;
            margin-right: 20rpx;
            .goods-img {
                width: 96rpx;
                height: 96rpx;
                margin-right: 20rpx;
            }
            .goods-name {
                flex: 1;
                text {
                    color: #666;
                }
            }
        }
        .count {
            width: 60px;
        }
    }
    .table-bottom {
        padding: 24rpx;
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        border-top: #ebebeb solid 1px;
    }
}

.product-item {
    padding: $app-page-padding;
    border-radius: 16rpx;

    .title-text {
        display: flex;
        font-weight: 700;
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #ebebeb;
        margin-bottom: 24rpx;
        font-size: 28rpx;
    }

    .title-text-flex {
        justify-content: space-between;
        align-items: center;
    }

    .title-text-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .title-text-desc {
        font-size: $font-size-24;
        color: $color-gray-2;
        padding-right: 12rpx;
        font-weight: normal;
    }
}

.product-item-line {
    .title-text {
        border-bottom: none;
        margin-bottom: 0rpx;
    }
}

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.order-header {
    display: flex;
    flex-wrap: wrap;
    padding: 40rpx 60rpx;
    justify-content: space-between;
    .item {
        .info {
            .num {
                font-size: 40rpx;
                font-weight: bold;
            }
            .unit {
                font-size: 24rpx;
            }
        }
        .name {
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.64);
        }
    }
}

.order-main {
    // margin-top: -190rpx;
    padding: 0 $app-page-padding $app-page-padding;

    .order-title {
        height: 98rpx;
        padding: $app-page-padding 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .order-t-l {
            height: 98rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-header-button {
            width: 158rpx;
            height: 64rpx;
            background: #ffffff;
            border-radius: 32rpx;
            text-align: center;
            line-height: 64rpx;
            color: $app-color-main;
            font-size: $font-size-28;
        }

        text {
            font-weight: 700;
            font-size: $font-size-36;
            color: $color-white;
        }

        view {
            font-size: $font-size-24;
            color: $color-white;
        }
    }

    .order-user {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .location {
            width: 54rpx;
            height: 54rpx;
            border-radius: 27rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $app-color-main;
            margin-right: 20rpx;
        }

        .user-info {
            display: flex;
            flex: 1;
            display: flex;
            flex-direction: column;

            text {
                color: $app-color-text-mian;
            }

            .user-info-name {
                font-size: $font-size-30;
                font-weight: 700;
                margin-bottom: 12rpx;
            }

            .user-info-location {
                font-size: $font-size-24;
                line-height: 32rpx;
            }
        }
    }

    .order-items {
        padding: 30rpx $app-page-padding 1rpx;
    }

    .order-info {
        display: flex;
        flex-direction: column;

        .order-info-item {
            padding: 14rpx 0;
            display: flex;
            flex-direction: row;

            text {
                font-size: $font-size-24;
            }

            .label {
                color: $app-color-text-tip;
                margin-right: 10rpx;
            }

            .value {
                color: $app-color-text-mian;
            }

            .order-info-image {
                width: 122rpx;
                height: 122rpx;
            }
        }
    }
}

.order-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $color-white;
    box-shadow: 0px -3px 38px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0 $app-page-padding;

    .btn {
        height: 64rpx;
        margin-left: 20rpx;
        padding: 0 40rpx;
    }
}

.logistics {
    height: 88rpx;
    border-top: 1rpx solid #ebebeb;
    display: flex;
    padding: 0 $app-item-padding;
    justify-content: space-between;
    align-items: center;

    .logistics-title {
        font-size: $font-size-28;
        font-weight: bold;
    }

    .logistics-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .logistics-desc {
        padding-right: 12rpx;
    }
}

.remark {
    background: #f7f7f7;

    .remark-main {
        border-bottom: 1rpx solid #ebebeb;

        .remark-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: $color-gray-1;
            padding: 24rpx 24rpx 20rpx 24rpx;

            view {
                font-weight: bold;
                font-size: $font-size-28;
            }

            text {
                font-size: $font-size-24;
                color: $color-gray-3;
            }
        }

        .remark-desc {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding: 0rpx 24rpx 20rpx 24rpx;
            word-break: break-all;
        }
    }

    & .remark-main:last-child {
        border: none;
    }
}
.remarkmenu {
    display: flex;
    padding: 24rpx;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #2f2f2f;
    border: 1rpx solid #f7f7f7;
    border-top: none;
    text {
        color: $color-gray-3;
    }
}

.ptb0 {
    padding-bottom: 0 !important;
}

.policy-item {
    .policy-name {
        display: flex;
        flex: 1;
    }
}

.total-price {
    color: $app-color-main;
}

.product-num {
    color: $color-gray-1;
    font-size: 28rpx;
}

.pro-item {
    display: flex;
    flex-direction: row;

    .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: 4rpx;

        .label {
            font-size: 26rpx;
            color: $app-color-text-tip;
            padding: 6rpx 0;

            text {
                font-size: 26rpx;
            }
            .specification {
                font-size: 30rpx;
                color: $color-gray-1;
            }
        }
        .price-bold {
            color: #000;
            font-size: 32rpx;
            font-weight: bold;
            padding-right: 14rpx;
        }
    }

    .right {
        display: flex;
        align-items: center;

        .price-text {
            font-size: $font-size-28;
            color: $color-gray-1;
        }
    }
}
.consignee {
    padding: $app-page-padding;
    // padding-bottom: 26rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    border-bottom: 2rpx solid #ebebeb;
}
.takeTheir {
    padding-top: 20rpx;
    .time {
        display: block;
        font-size: 24rpx;
        color: #333333;
        padding: 10rpx 0;
        font-weight: normal;
    }
}
.mapAddress {
    flex: 1;
    display: flex;
    font-weight: normal;
    justify-content: space-between;
    .navigation {
        display: flex;
        view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 60rpx;
            margin-left: 20rpx;
            text {
                color: #999;
            }
        }
    }
}
.fs-24 {
    font-size: 24rpx;
    color: #666;
}
.code-pop {
    width: 640rpx;
    background: #ffffff;
    border-radius: 32rpx;
    position: relative;
    .closeimg {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        bottom: -96rpx;
        left: 50%;
        margin-left: -32rpx;
    }
}
.code-top {
    position: relative;
    height: 208rpx;
    background: $app-color-main;
    border-radius: 32rpx 32rpx 0 0;
    image {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 640rpx;
        height: 114rpx;
    }
}
.c-t-title {
    font-size: 42rpx;
    text-align: center;
    color: #fff;
    padding: 24rpx 0 12rpx 0;
}
.c-t-list {
    display: flex;
    justify-content: center;
    & > view {
        margin: 0 22rpx;
        color: #fff;
        font-size: 22rpx;
    }
}
.code-info {
    position: relative;
    width: 448rpx;
    height: 448rpx;
    background: #ffffff;
    box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.2);
    border-radius: 16rpx;
    margin: -48rpx auto 0 auto;
    padding: 64rpx;
    .uqrcode {
        width: 448rpx;
        height: 448rpx;
        display: block;
    }
}
.desc {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 24rpx 0 16rpx 0;
}
.desc1 {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 0rpx 0 40rpx 0;
}
.icon-gray-1 {
    margin-top: 8rpx;
}

.order-state-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .btn {
        margin-left: $app-page-padding;
    }
}

.input-number-box {
    .btn-input-box {
        display: block;
        text-align: center;
        font-size: $font-size-26;
        height: auto;
    }
    .number-btn {
        display: flex;
        justify-content: center;
        border: none;
        background-color: none;
        justify-content: center;
        align-items: center;
        position: relative;
        font-size: 45rpx;
        line-height: 56rpx;
        height: 56rpx;
        width: 56rpx;
        text-align: center;
        overflow: hidden;
        border-radius: 100rpx;
        display: block;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;

        &:before {
            border: none;
        }

        &:after {
            border: none;
        }
    }

    .number-btn-minus {
        background-image: url(@/static/icon/icon_btn_minus.png);
    }

    .number-btn-plus {
        background-image: url(@/static/icon/icon_btn_plus.png);
    }
}
</style>
